<template>
  <div id="video" class="video-wrap"></div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { getVideoDetail } from '@/api.js'
import { ref, reactive } from 'vue'
const route = useRoute()
let id = route.query.id
const source = ref('')
const options = ref([])
const state = reactive({
  player: ''
})
getVideoDetail({
  video_id: id
}).then(res => {
  console.log(res)
  source.value = res.data.video_file
  state.player = new Aliplayer({
    id: 'video',
    source: source.value,
    width: "100%",
    auto: true
  })
})
</script>
<style scoped>
.video-wrap {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>